AngularのアプリをAmplifyでホスティングしてみた

大高大輔

2021.05.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！DA(データアナリティクス)事業本部インテグレーション部の大高です。

先日、Amplifyの入門としてまずはAmplify CLIを利用してアプリケーションの初期化処理までを行ってみました。今回はアプリをホスティングして、実際にブラウザで表示するところを試してみたいと思います。

前提

この環境は以下の記事でAngularのアプリを作成し、Amplify CLIで初期化までを行っています。

ホスティングの設定

ホスティングの設定として、amplify add hostingコマンドを実行します。

プラグインモジュールの選択では今回はHosting with Amplify Consoleを選択して、Amplify Consoleに任せるようにします。また、タイプの設定ではContinuous deployment (Git-based deployments)としてGitベースでCDできるようにします。

$ amplify add hosting
Initializing new Amplify CLI version...
Done initializing new version.
Scanning for plugins...
Plugin scan successful
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type Continuous deployment (Git-based deployments)
? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository

Continuous deployment (Git-based deployments) を選択すると、ブラウザでAWS管理コンソールが開き、Amplifyの設定画面が開きます。

Frontendの設定で、今回は「リポジトリサービスプロバイダー」に「GitHub」を指定します。

GitHubと連携してよいか認証が要求されるので、認証をしたらリポジトリとブランチを指定して「次へ」と進みます。なお、今回は事前に空のリポジトリ（ブランチはmainのみ）をGitHubで準備していました。

アプリのビルド設定については、一旦そのままにして「次へ」と進みます。

設定を確認し、「保存してデプロイ」をクリックします。

クリック後、しばらくすると自動で「プロビジョン → ビルド → デプロイ → 検証」と処理が進んでいき、完了します。

コンソールに戻ってEnterを入力すると、最終的にホスティングされたURLが表示されます。

? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository 
Amplify hosting urls: 
┌──────────────┬────────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                     │
├──────────────┼────────────────────────────────────────────┤
│ main         │ https://main.xxxxxxxxxxxxxx.amplifyapp.com │
└──────────────┴────────────────────────────────────────────┘

設定の修正

実はこの段階だと、表示されたURLにアクセスしてもAccess Deniedが表示されてしまいます。

これは、GitHub側のリポジトリはmainブランチの初期リポジトリだけ存在していたので、ローカルのAngularのコードがGitHub側に無く、想定されたコードが存在しないためです。また、「ビルド設定」も適切に設定されていないのでビルドされたファイル（アーティファクト）も適切なものが出力されません。

それぞれ修正をしていきます。

ビルド設定の修正

ビルド設定はAmplifyコンソール画面から修正します。

Amplifyコンソール画面で設定したいアプリ（今回はhelloamplifyangular）を選択後、画面左側の「アプリの設定 > ビルドの設定」から設定画面を開きます。

「ビルド設定の追加」の「編集」ボタンから以下のように編集をして保存します。

まずはpreBuildでアプリで利用するパッケージ群をインストールしたいのでyarn installを指定します。（yarnはビルド環境に自動セットアップされており、利用可能です）

次にbuildでアプリをビルドするコマンドyarn buildを指定します。

baseDirectoryは適宜アプリケーションに合わせて設定しますが、今回はhello-amplify-angularという名前のアプリで、ビルド結果の出力先がdist/hello-amplify-angularになるので、このように設定しています。

cacheにはnode_modulesフォルダを指定します。これにより、初回ビルド時にこのパスの内容がキャッシュされ、次回以降のビルド時にはキャッシュを利用することでビルド速度が向上します。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands: 
        - yarn build
  artifacts:
    baseDirectory: dist/hello-amplify-angular
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

ローカルGitのGitHubへの接続と修正

次に、アプリのソースコードについてです。

現状ではローカルのGitの設定でremoteの設定がされていないので、remote設定を実施してGitHub側へPushします。

$ git remote add origin https://github.com/xxxxxxxxxxxx/hello-amplify-angular.git
$ git add .
$ git commit -m "[add]init commit"
$ git push origin HEAD

これでGitHub側へpushされましたが、実はこのブランチ名はmasterです。Amplifyで設定したブランチはmainブランチなのでローカル側で強制的にマージしてmainブランチにpushしてしまいます。

$ git checkout main
$ git merge --allow-unrelated-histories origin/master
CONFLICT (add/add): Merge conflict in README.md
Auto-merging README.md
CONFLICT (add/add): Merge conflict in .gitignore
Auto-merging .gitignore
Automatic merge failed; fix conflicts and then commit the result.
# ここでコンフリクトの手動マージ作業をする
$ git add .
$ git commit -m "[fix]force merged origin/master"
[main ccd61e2] [fix]force merged origin/master
$ git push origin HEAD
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 4 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 366 bytes | 183.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To https://github.com/DaisukeOtaka/hello-amplify-angular.git
   2b44b21..ccd61e2  HEAD -> main

これで設定の修正は完了です。